Cart Suggestion

Solved
Grace_01
Excursionist
36 1 3

Hello Community,

In cart page have suggestion product but it's visible in vertical is there any ways to show this related product in horizontal or carousel. Please if any one know any solution on it.

Currently it's visible in horizontal 

N2M.jpg

Using below code 

{% assign heading = 'You may also like' %}
<div class="related-div ">
  <div class="cart-related shopify-section index-section "  id="shopify-section-featured-collections">
    <div class="page-width">
  <div class="section-header text-center"><h2>{{ heading }}</h2></div>
<ul class="grid grid--uniform grid--view-items">
 
    {% assign prod_handle = '' %}
     {% assign item_handle = '' %}
     {% for item in cart.items %}	
     {%assign  item_handle = item_handle | append: item.product.handle | append: ';' %}
    {% endfor %}
        {% for item in cart.items %}	
    {% for col_item in item.product.collections %}
    {% for prod in col_item.products %}
 {% if prod_handle contains  prod.handle or  item_handle contains  prod.handle %}
    {% else %}
  			<div class="cre_item {{ prod.handle }}">
                <div class="related-item grid__item grid__item--featured-collections small--one-half medium-up--one-fif2th {{ prod.handle }}" style="">
            	<div class="grid-view-item product-card">
                   <div class="image">            
                        <a href="{{ prod.url | within: collection }}" title="{{ product.title | escape }}">
                          {{ prod.featured_image | product_img_url: "medium" | img_tag}}
                     </a>
                    </div>
                    <div class="name h5 grid-view-item__title">
                        <a href="{{ prod.url }}" title="{{ prod.title | escape }}">{{ prod.title }}</a>
                  </div>
                  <div class="price">
                    <span class="price-item price-item--regular" data-regular-price="">
                       {{ prod.price | money }}
                  </span>
                  </div>
                 <div class="quick-view-button" style="display: none;">
                    <a class="sca-qv-button button-quick-view" href="#sca-qv-showqv" title="Quick Add" handle="{{ prod.handle }}" style="font-family: tahoma; font-size: 14px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">QUICK VIEW</a>
                  </div>
                  </div>
                  {%assign  prod_handle = prod_handle | append: prod.handle | append: ';' %}
                  <div class="clear"></div>
                </div>
     		 </div>          
      {% endif %}
    
    {% endfor %}
        {% endfor %}

    {% endfor %}
  </ul>
       </div>
  </div>
</div>
 <script type="text/javascript">
$(".related-div").hide();
  
  if($(".cre_item").text()){
  $(".related-div").show();
  }
        
</script>

 

 

0 Likes
dmwwebartisan
Shopify Partner
7343 1736 2318

@Grace_01 

Please share your store URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Grace_01
Excursionist
36 1 3

@dmwwebartisan store url messaged you please check

0 Likes
dmwwebartisan
Shopify Partner
7343 1736 2318

@Grace_01 

images display properly in my computer please check screenshot

2021-06-25_19-50_Test – New2Modern.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Grace_01
Excursionist
36 1 3

@dmwwebartisan Please check in cart page.. not on product page

0 Likes
dmwwebartisan
Shopify Partner
7343 1736 2318

This is an accepted solution.

@Grace_01 

Pleace replace all code in your file but before bakup your old code 

{% assign heading = 'You may also like' %}
<div class="related-div ">
  <div class="cart-related shopify-section index-section "  id="shopify-section-featured-collections">
    <div class="page-width">
  <div class="section-header text-center"><h2>{{ heading }}</h2></div>
<ul class="grid grid--uniform grid--view-items">
 
    {% assign prod_handle = '' %}
     {% assign item_handle = '' %}
     {% for item in cart.items %}	
     {%assign  item_handle = item_handle | append: item.product.handle | append: ';' %}
    {% endfor %}
        {% for item in cart.items %}	
    {% for col_item in item.product.collections %}
    {% for prod in col_item.products %}
 {% if prod_handle contains  prod.handle or  item_handle contains  prod.handle %}
    {% else %}
  			<div class="cre_item {{ prod.handle }} grid__item grid-product small--one-half medium--one-half large--one-quarter">
                <div class="related-item grid__item grid__item--featured-collections small--one-half medium-up--one-fif2th {{ prod.handle }}" style="">
            	<div class="grid-view-item product-card">
                   <div class="image">            
                        <a href="{{ prod.url | within: collection }}" title="{{ product.title | escape }}">
                          {{ prod.featured_image | product_img_url: "medium" | img_tag}}
                     </a>
                    </div>
                    <div class="name h5 grid-view-item__title">
                        <a href="{{ prod.url }}" title="{{ prod.title | escape }}">{{ prod.title }}</a>
                  </div>
                  <div class="price">
                    <span class="price-item price-item--regular" data-regular-price="">
                       {{ prod.price | money }}
                  </span>
                  </div>
                 <div class="quick-view-button" style="display: none;">
                    <a class="sca-qv-button button-quick-view" href="#sca-qv-showqv" title="Quick Add" handle="{{ prod.handle }}" style="font-family: tahoma; font-size: 14px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0);">QUICK VIEW</a>
                  </div>
                  </div>
                  {%assign  prod_handle = prod_handle | append: prod.handle | append: ';' %}
                  <div class="clear"></div>
                </div>
     		 </div>          
      {% endif %}
    
    {% endfor %}
        {% endfor %}

    {% endfor %}
  </ul>
       </div>
  </div>
</div>
 <script type="text/javascript">
$(".related-div").hide();
  
  if($(".cre_item").text()){
  $(".related-div").show();
  }
        
</script>

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
7343 1736 2318

@Grace_01 

 Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Grace_01
Excursionist
36 1 3

@dmwwebartisan Thanks it's working perfect. You are life saver

0 Likes
dmwwebartisan
Shopify Partner
7343 1736 2318

@Grace_01 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Grace_01
Excursionist
36 1 3

@dmwwebartisan In desktop it looks perfect but mobile view shows in grid.. is there any way to show this horizontal in mobile as well ? 

AB2.jpg