Создайте интернет-магазин с Rails

 class CartsController < ApplicationController before_action :authenticate_user! def show cart_ids = $redis.smembers current_user_cart @cart_movies = Movie.find(cart_ids) end def add $redis.sadd current_user_cart, params[:movie_id] render json: current_user.cart_count, status: 200 end def remove $redis.srem current_user_cart, params[:movie_id] render json: current_user.cart_count, status: 200 end private def current_user_cart "cart#{current_user.id}" end end 

Мы добавили :authenticate_user! в качестве обратного вызова before_action для ограничения доступа к действиям контроллера только зарегистрированным пользователям. Кроме того, в действиях добавления и удаления мы отвечаем current_user.cart_count который является методом экземпляра в модели User который возвращает количество фильмов в корзине текущих пользователей с помощью команды SCARD :

 def cart_count $redis.scard "cart#{id}" end 

Последнее, что нужно сделать, это добавить ссылку « My Cart в меню верхней панели, чтобы пользователи могли получить к ней прямой доступ в любое время. Также,
давайте представим количество фильмов в их тележках:

 <li> <%= link_to cart_path do%> <i class="fi-shopping-cart"></i> My Cart (<span class="cart-count"><%=current_user.cart_count%></span>) <%end%> </li> 

Кнопка «Добавить в корзину»

Создайте кнопку «Добавить в корзину», которая обрабатывает действия add и remove . Мы добавим его на страницу show фильмов:

 <%if signed_in?%> <%=link_to "", class: "button", data: {target: @cart_action, addUrl: add_to_cart_path(@movie), removeUrl: remove_from_cart_path(@movie)} do%> <i class="fi-shopping-cart"></i> <span><%=@cart_action%></span> Cart <%end%> <%end%> 

Мы определяем @cart_action экземпляра @cart_action в фильме movies#show action как:

 def show @movie = Movie.find(params[:id]) @cart_action = @movie.cart_action current_user.try :id end 

Он вызывает метод @movie , который проверяет, является ли этот фильм участником корзины текущего пользователя. Он возвращает соответствующий текст, который будет отображаться как метка кнопки, а также использоваться в нашем coffescript, как мы увидим позже.

 def cart_action(current_user_id) if $redis.sismember "cart#{current_user_id}", id "Remove from" else "Add to" end end 

Здесь мы использовали команду SISMEMBER Redis, которая определяет, является ли данное значение членом набора.

Добавить / удалить запросы

Нам нужно подключить кнопку «Добавить в корзину», используя некоторые скрипты jQuery и запросы AJAX.

 $(window).load -> $('a[data-target]').click (e) -> e.preventDefault() $this = $(this) if $this.data('target') == 'Add to' url = $this.data('addurl') new_target = "Remove from" else url = $this.data('removeurl') new_target = "Add to" $.ajax url: url, type: 'put', success: (data) -> $('.cart-count').html(data) $this.find('span').html(new_target) $this.data('target', new_target) 

Мы проверяем состояние текущего фильма с помощью target атрибута данных, который имеет значение @cart_action как мы упоминали ранее. Следовательно, мы можем указать url ajax, который является либо add_to_cart либо remove_from_cart , так как мы передаем их в наш скрипт, используя addurl данных addurl & removeurl .
После успешного выполнения ajax-запроса установите количество фильмов в корзине, которое находится в верхнем меню, с новым номером, измените метку кнопки и установите target атрибут данных с новым значением.

Примечание : я отключил Turbolinks.js чтобы мы могли сделать наш скрипт максимально простым. Вы можете сделать это, просто удалив require turbolinks из файла application.js .

Страница моей корзины

Теперь, последнее, что нужно сделать, это представить элементы carts/show странице carts/show . Давайте добавим несколько тегов HTML:

 <div id="mycart" class="small-10 small-centered medium-8 large-8 column"> <div class="p1 glassy-bg mb1 text-center radius-l1 radius-r1"> <h4>My Cart</h4> <p class="mb0"> You've selected <span class="cart-count"><%=current_user.cart_count%></span> movies!</p> </div> <% @cart_movies.each do |movie|%> <div data-equalizer class="cart-movie large-12 column mb1"> <div class="column large-2 text-center p0" data-equalizer-watch> <%=link_to movie do%> <%=image_tag movie.poster, class: "radius-l1"%> <%end%> </div> <div class="column large-7 glassy-bg text-center" data-equalizer-watch> <p class="scale ptm"> <%= movie.title %> </p> </div> <div class="column large-3 primary-bg text-center radius-r1" data-equalizer-watch> <%=link_to "" , data: {targetUrl: remove_from_cart_path(movie)} do%> <i class="fi-x right"></i> <%end%> <h4 class="scale">$ <%= movie.price %></h4> </div> </div> <%end%> </div> 

Эквалайзер , предоставляемый Фондом, является отличным способом для создания контента равной высоты на вашей странице. Вы можете найти более подробную информацию о том, как это работает здесь .

Добавьте немного особого стиля в файл carts.scss :

 #mycart { .scale { position: relative; top: 35%; transform: translateY(-35%); } .fi-x { position: relative; top: 10px; right: -5px; } } 

Наконец, напишите аналогичный скрипт для активации функции remove значка.

 $(window).load -> $('#mycart .fi-x').click (e) -> e.preventDefault() $this = $(this).closest('a') url = $this.data('targeturl') $.ajax url: url, type: 'put', success: (data) -> $('.cart-count').html(data) $this.closest('.cart-movie').slideUp() 

Вау, кажется, что сейчас все работает гладко. Прекрасная работа!

Еще больше делать

Еще предстоит еще много работы, прежде чем мы сможем сказать, что наш интернет-магазин завершен. В моей следующей статье я расскажу об интеграции Braintree с нашим приложением для приема платежей. Спасибо за прочтение!