WHEN RELATED PRODUCT CLICK NEXT PREVIOUS PRODUCT SHOW

-
WHEN RELATED PRODUCT CLICK NEXT PREVIOUS PRODUCT SHOW
----------------------------------------------------------------------------------------------------------
WHEN RELATED PRODUCT CLICK NEXT PREVIOUS PRODUCT SHOW

-------------------------------------------------------------------------------------------------------------------
STEP :0
ADD CSS LINKS  product-template.liquid 
-------------------------------------------------------------------------------------------------------------------
<link href='{{ 'BootStrap4.3.1.css' | asset_url }}' rel='stylesheet' type='text/css' media='all' />
<link href='{{ 'ProductCard.css' | asset_url }}' rel='stylesheet' type='text/css' media='all' />
-------------------------------------------------------------------------------------------------------------------
STEP :1
ADD SNIPPET LINKS  product-template.liquid  BEFORE SCHEMA TAG
-------------------------------------------------------------------------------------------------------------------
{%- render 'next-prev-product' -%} 
{%- include 'related-products' -%} 
-------------------------------------------------------------------------------------------------------------------
STEP :2
BEFORE SETTING DIV CLOSED  ] ADD RELATED BLCK CODE
-------------------------------------------------------------------------------------------------------------------
,
{
"type": "checkbox",
"id": "next_prev_enable",
"label": "Enable next/previous products",
"default": true
}
  ]
-------------------------------------------------------------------------------------------------------------------
STEP :3
AFTER SETTING  DIV CLOSED ] ADD RELATED BLCK CODE
-------------------------------------------------------------------------------------------------------------------
]

,

"blocks": [
{
"type": "related-product",
"name": "Related Product",
"limit": 1,
"settings": [
{
"type": "select",
"id": "setwidthcontent",
"label": "Width Content",
"default":"container",
"options": [
{
"value": "container",
"label": "Container"
},
{
"value": "container-fluid",
"label": "Container Fluid"
},
{
"value": "",
"label": "Full No Padding"
}
]
},
{
"type": "text",
"id": "relate_products_title",
"label": "Title",
"default": "Related product"
}
]
}
]

-------------------------------------------------------------------------------------------------------------------
BootStrap4.3.1.css CODE
-------------------------------------------------------------------------------------------------------------------
/*! Bootstrap v4.3.1 (https://getbootstrap.com/)*/
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}img{vertical-align:middle;border-style:none}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}

-------------------------------------------------------------------------------------------------------------------
ProductCard.css CODE
-------------------------------------------------------------------------------------------------------------------
*,:after,:before { box-sizing: border-box } .col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-2-4,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-9-6,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-2-4,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-9-6,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-2-4,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-9-6,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-2-4,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-9-6,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto,.container,.container-fluid { padding-left: var(--g-hgutter); padding-right: var(--g-hgutter) } .row { margin-right: calc(0px - var(--g-hgutter)); margin-left: calc(0px - var(--g-hgutter)) } .icon,[class^=icon-],svg { display: inline-block; vertical-align: middle; width: 16px; height: 16px; font-size: 16px; fill: currentColor } svg.icon:not(.icon--full-color) circle,svg.icon:not(.icon--full-color) ellipse,svg.icon:not(.icon--full-color) g,svg.icon:not(.icon--full-color) line,svg.icon:not(.icon--full-color) path,svg.icon:not(.icon--full-color) polygon,svg.icon:not(.icon--full-color) polyline,svg.icon:not(.icon--full-color) rect,symbol.icon:not(.icon--full-color) circle,symbol.icon:not(.icon--full-color) ellipse,symbol.icon:not(.icon--full-color) g,symbol.icon:not(.icon--full-color) line,symbol.icon:not(.icon--full-color) path,symbol.icon:not(.icon--full-color) polygon,symbol.icon:not(.icon--full-color) polyline,symbol.icon:not(.icon--full-color) rect { fill: inherit; stroke: inherit } .lazyload,.lazyloading { opacity: .3 } .lazyloaded { opacity: 1; transition: opacity .2s } ol,ul { margin: 0; padding: 0 } .rtl .list-styled { padding-right: 30px; padding-left: inherit } .list--inline { padding: 0; margin: 0 } .list--inline li { display: inline-block; margin-bottom: 0 } .text-center .rte ol,.text-center .rte ul,.text-center.rte ol,.text-center.rte ul { margin-left: 0; list-style-position: inside } .product-card { position: relative; display: block; text-align: center; padding: 0; z-index: 1; height: 100% } .grid--no-gutters .product-card { border-left-width: 1px } .product-card .js-product-video { position: absolute!important } .collection__card--first .product-card { border-left-width: 0 } .product-card:focus,.product-card:hover { color: #666; outline: 0 } .product-card__overlay { padding: 20px; visibility: hidden; opacity: 0; position: absolute; right: 0; top: 0; transition: all .3s ease-in } .product-card:focus .product-card__overlay,.product-card:hover .product-card__overlay { visibility: visible; opacity: 1 } .product-card__loading { width: 10px; height: 10px; display: none; color: inherit!important; top: 50%; left: 50%; margin: -5px 0 0 -5px; position: absolute } .product-card__overlay-btn { position: relative; padding: 0; margin: 5px 0; width: 40px; height: 40px; text-align: center; line-height: 35px; background: #333 } .product-card__overlay-btn.js-btn-wishlist { font-size: 0 } .product-card__overlay-btn>span { display: none } .product-card--style1 .product-card__image-wr { box-shadow: 0 0 20px 0 rgba(0,0,0,.03) } .product-card__image-wr { position: relative } .product-card__image { float: left; margin: 0 auto } .product-card__image:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: 0; transition: all ease .45s } .product-card:hover .product-card__image:after { opacity: .3 } .product-card__info { padding: 20px 0; margin-bottom: var(--g-gutter) } .product-card__name { color: var(--g-color-heading); font-weight: 600; font-size: calc(var(--g-font-size) + 2px) } .product-card__regular-price { opacity: 1; color: #737373; margin-left: 5px }
-------------------------------------------------------------------------------------------------------------------
next-prev-product CODE
-------------------------------------------------------------------------------------------------------------------
{%- if section.settings.next_prev_enable -%}
<!-- next-prev-product.liquid -->
{%- if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' -%}
{%- assign found_a_collection = false -%}
{%- for c in product.collections -%}
{%- if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 -%}
{%- assign found_a_collection = true -%}
{%- assign collection = c -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- assign produccount = columns_product -%}
{%- assign currentProduct = product -%}
<style>
.next-prev-product {
position: fixed;
top: 50%;
margin-top: -50px;
z-index: 1;
max-width: 60px;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s
}
.next-prev-product:hover {
max-width: 70px
}
.next-prev-product.prev {
left: 0
}
.next-prev-product.next {
right: 0
}
@media (max-width:991px) {
.next-prev-product {
display: none
}
}
</style>
{%- if collection.previous_product -%}
{%- assign prevProduct = collection.previous_product -%}
<a class="next-prev-product prev shadow" href="{{prevProduct.url}}" title="{{prevProduct.title}}">
<img class="lazyload" data-src="{{prevProduct.featured_image | img_url:'120x'}}" alt="{{prevProduct.featured_image.alt}}" />
</a>
{%- endif -%}
{%- if collection.next_product -%}
{%- assign nextProduct = collection.next_product -%}
<a class="next-prev-product next shadow" href="{{nextProduct.url}}" title="{{nextProduct.title}}">
<img class="lazyload" data-sizes="auto" data-src="{{nextProduct.featured_image | img_url:'120x'}}" alt="{{nextProduct.featured_image.alt}}" />
</a>
{%- endif -%}
{%- endif -%}
-------------------------------------------------------------------------------------------------------------------
related-products CODE
-------------------------------------------------------------------------------------------------------------------
{%- if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' -%}
{%- assign found_a_collection = false -%}
{%- for c in product.collections -%}
{%- if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 -%}
{%- assign found_a_collection = true -%}
{%- assign collection = c -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- assign produccount = columns_product -%}
{%- assign currentProduct = product -%}
<div id="productrelated" class="pt-5" >
<div class="{{block.settings.setwidthcontent}}">
{%- if block.settings.relate_products_title != blank -%}
<h4 class="mb-5 text-center section-title-1" data-aos="fade-up" >{{ block.settings.relate_products_title }}</h4>
{%- endif -%}
<div class="js-slick-carousel" data-aos="fade-up">
<div class="row slick_content" data-section-id="relate-{{section.id}}" data-section-type="slickCarousels" data-dots="true" data-rows="1" data-slidesToShow="4" data-infinite="false">
{%- assign collection_produclists = collection.products -%}
{%- for product in collection_produclists limit: 6 -%}
{%- if product.handle != currentProduct.handle -%}
<div class="col">
{%- include 'product-card' -%}
</div>  
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
</div>
-------------------------------------------------------------------------------------------------------------------
product-card CODE
-------------------------------------------------------------------------------------------------------------------
<!-- product-grid-1.liquid -->
<div class="product-card js-product-card product-card--style1" data-price="{{ product.price }}">
<div class="product-card__image-wr">
{%- assign image = product.featured_image -%}
<a class="product-card__image js" href="{{ product.url | within: collection }}" style="max-width: 480px;" data-image-id="{{ image.id }}">
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
src="{%- include 'srcBlank' -%}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
</div>
-------------------------------------------------------------------------------------------------------------------







Comments

Post a Comment

Popular posts from this blog

ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY DEBUT THEME 5️⃣

-
Image
  ------------------------------------------------------------------------------------------------------------------------ ADD AUTOCOMPLETE SEARCH BOX IN SHOPIFY READ MORE https://youtu.be/acTT5_lkrCg https://stackoverflow.com/questions/45477730/ajax-jquery-autocomplete-in-search-box-shopify https://stackoverflow.com/questions/39593169/sorting-json-results-by-10-max-results DOWNLOAD: https://fbgadgets.myshopify.com/admin/files/0e841afc73cd3152ebf447feabe7abfa/theme_export__fbgadgets-myshopify-com-shopify-debut-theme__05JUL2022-0654am.zip/download ------------------------------------------------------------------------------------------------------------------------ 1) NEEDS JQUERY FILE WITHOUT ASYNC OR DEFFER IN LINK LIKE <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> --> OR CHANGE VENDOR JS FILE LINK IN  LAYOUT>THEME LIQUID FILE <script src="{{ 'vendor.js' | asset_url }}"></script> ...
Read more