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 %}
