Re: How do I integrate the Product Card template and settings into a Flickity Slider.

How do I integrate the Product Card template and settings into a Flickity Slider.

ToysAfter12
New Member
4 0 0

Good day!

 

I have been trying to format a promising Flickity script in order to use it to showcase my newest products. I've tried many different formats by very very carefully paying attention to the dev's instructions. Ultimately the one that worked was one that was the one I will show below.

 

My problem is that when I choose a collection to feature, the images are not uniform and the mobile version squashes together. The most recent attempt resulted in me trying to implement the card-product template, but when they're replaced by images, again, the images are not uniform and now I have an inconsistency in the font links as well (the product price in the image turned blue like a normal hyperlink).

 

I would like to have my images displayed in a uniformed manner when featuring a collection's products and I would like my mobile version to show a singular centralized image (though I'm sure the previous and next images will be partially shown at the sides, which is absolutely fine).

 

I am using Ride ver. 14 and I run an adult retail site (so screenshots will be hard...sorry).

I have the Flickity license, so I have the js and css files if they need to be used. So please let me know.

I commented out Product Card options because I couldn't figure them out. So if you manage to figure it out, thank you so much! If you cut it out of your corrected version, I'd be happy with that too!

 

I'm at my wit's end. So thank you for your help.

 

Here is the script I'm trying to use:

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}

{% comment %} This previously went within the Schema section for the settings. It can go back once the label has been translated correctly.
{
"type": "select",
"id": "image_ratio",
"options": [
{
  "value": "adapt",
  "label": "t:section.products.settings.image_ratio.options__1.label"
},
{
  "value": "portrait",
  "label": "t:section.products.settings.image_ratio.options__2.label"
},
{
  "value": "square",
  "label": "t:section.products.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:section.products.settings.image_ratio.label",
"info": "t:section.products.settings.image_ratio.info"
},{% endcomment %}

{{ 'component-card.css' | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == 'blob' %}
  {{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}

{% assign collection_main = collections[section.settings.collection_main] %}
{% assign collection_limit = section.settings.collection_limit %}

{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"resize": true,
"autoPlay": 2500,
"pageDots": false,
"prevNextButtons": false,
"freeScroll": true,
"pauseAutoPlayOnHover": true,
"wrapAround": {{ wrap_around }}
}'>

{% for product in collection_main.products limit: collection_limit %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | img_url: img_width }}" alt="{{ product.title }}">
    <h4>{{ product.title }}</h4>
    <p>{{ product.price | money }}</p>
  </a>
</div>
{% endfor %}
  
{%- for product in collection_main.products -%}
  <div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
    {% render 'card-product', 
      card_product: section.settings.product, 
      media_aspect_ratio: section.settings.image_ratio, 
      image_shape: section.settings.image_shape, 
      section_id: section.id
    %}
  </div>
{%- endfor -%}
</div>
</div>
</div>

<style>
  .flickity-section-{{ section.id }} .page-width {
  max-width: 100% !important;
}
  @media screen and (max-width: 749px) {
  .carousel__cell {
    width: 50% !important;
  }
</style>

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "collection",
"id": "collection_main",
"label": "Choose a Collection"
},
{
"type": "range",
"id": "collection_limit",
"min": 2,
"max": 50,
"step": 1,
"unit": ".",
"label": "How many products to show",
"default": 5
},
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "New Featured Collection Slider"
}, 
{
"type": "range",
"id": "img_width",
"min": 200,
"max": 600,
"step": 5,
"unit": "px",
"label": "Image Width",
"default": 200
},
{
"type": "select",
"id": "cell_align",
"label": "Slide Alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
],
"default": "center"
},
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "50%",
"label": "Two"
},
{
"value": "33%",
"label": "Three"
},
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"presets": [
{
"name": "New Featured Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}

 

Replies 2 (2)

PaulNewton
Shopify Partner
7450 656 1562

Hi @ToysAfter12 👋 Even if you had inspectable examples your asking someone to implement a full blown feature for you,  which is beyond the scope of the forums.

 

Your trying to combine to many things in one go, 

Step back and make a minimal reproducible test case that is only HTML,CSS,and JS so you understand the library better itself, no shopify-theme involved.

Ignore the themes underlying source-code , ignore liquid, get the rendered HTML structure from the website for the the UI your trying to utilize ; such as using view-source(ctrl+u) or a browser devtools(F12 or ctrl+shift+c to inspect elements) 

Then put only the smallest amount of HTML need into sandbox tool like codepen, jsbin, etc  to then work with the library.

 

Get something dead simple working first then add complexity.

 

If you just need this customization implemented for you then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


ToysAfter12
New Member
4 0 0
Excuse me, you're being completely rude right now.

I never asked someone to implement a new feature for me and even if I did,
it doesn't go against the customization that is allowed with our sites.

I worked hard trying to get this code together and I'm asking for help. Do
NOT patronize me and then tell me to buy your services.