forked from kmalap05/shopify-theme-skeleton
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #88 from kmalap05/main
Add Collage Section
- Loading branch information
Showing
4 changed files
with
394 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,223 @@ | ||
{% assign section_id = section.id %} | ||
{% assign section_classes = 'section-' | append: section_id | append: '-padding' %} | ||
|
||
<div class="color-{{ section.settings.color_scheme }} gradient isolate"> | ||
<div class="page-width {{ section_classes }}"> | ||
{% if section.settings.heading != blank %} | ||
<h2 class="collage-wrapper-title inline-richtext {{ section.settings.heading_size }}"> | ||
{{ section.settings.heading }} | ||
</h2> | ||
{% endif %} | ||
<div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}"> | ||
{% for block in section.blocks %} | ||
<div class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}"> | ||
{% case block.type %} | ||
{% when 'image' %} | ||
<div class="collage-card"> | ||
<div class="media media--transparent ratio"> | ||
{{ block.settings.image | img_url: 'master' | img_tag: 'collage-image' }} | ||
</div> | ||
</div> | ||
{% when 'product' %} | ||
<div class="collage-card product-card"> | ||
{% if block.settings.second_image %} | ||
{{ block.settings.second_image | img_url: 'master' | img_tag: 'second-image' }} | ||
{% else %} | ||
<div class="product"> | ||
<h3 class="product__title">{{ block.settings.product.title }}</h3> | ||
<p class="product__description">{{ block.settings.product.description }}</p> | ||
<p class="product__price">Price: {{ block.settings.product.price | money }}</p> | ||
<p class="product__sku">SKU: {{ block.settings.product.sku }}</p> | ||
<!-- Add more product details as needed --> | ||
<a href="{{ block.settings.product.url }}" class="btn btn-primary">Shop Now</a> | ||
</div> | ||
{% endif %} | ||
</div> | ||
{% when 'collection' %} | ||
<div class="collage-card collection-card"> | ||
<div class="collection"> | ||
<h3 class="collection__title">{{ block.settings.collection.title }}</h3> | ||
<p class="collection__description">{{ block.settings.collection.description }}</p> | ||
<!-- Display collection items or details as needed --> | ||
<a href="{{ block.settings.collection.url }}" class="btn btn-secondary">{{ block.settings.collection_text | default: block.settings.collection.title }}</a> | ||
</div> | ||
</div> | ||
{% when 'video' %} | ||
<div class="collage-card video-card"> | ||
<div class="media media--transparent ratio"> | ||
{{ block.settings.cover_image | img_url: 'master' | img_tag: 'video-cover' }} | ||
</div> | ||
<a href="{{ block.settings.video_url }}" class="collage-card__link"></a> | ||
</div> | ||
{% endcase %} | ||
</div> | ||
{% endfor %} | ||
</div> | ||
</div> | ||
</div> | ||
|
||
{% schema %} | ||
{ | ||
"name": "Custom Collage", | ||
"tag": "section", | ||
"class": "section", | ||
"settings": [ | ||
{ | ||
"type": "inline_richtext", | ||
"id": "heading", | ||
"default": "Multimedia Collage", | ||
"label": "Heading" | ||
}, | ||
{ | ||
"type": "select", | ||
"id": "heading_size", | ||
"options": [ | ||
{ "value": "h2", "label": "H2" }, | ||
{ "value": "h1", "label": "H1" }, | ||
{ "value": "h0", "label": "H0" } | ||
], | ||
"default": "h1", | ||
"label": "Heading Size" | ||
}, | ||
{ | ||
"type": "select", | ||
"id": "desktop_layout", | ||
"options": [ | ||
{ "value": "left", "label": "Left" }, | ||
{ "value": "right", "label": "Right" } | ||
], | ||
"default": "left", | ||
"label": "Desktop Layout" | ||
}, | ||
{ | ||
"type": "select", | ||
"id": "mobile_layout", | ||
"options": [ | ||
{ "value": "collage", "label": "Collage" }, | ||
{ "value": "column", "label": "Column" } | ||
], | ||
"default": "column", | ||
"label": "Mobile Layout" | ||
}, | ||
{ | ||
"type": "select", | ||
"id": "card_styles", | ||
"options": [ | ||
{ "value": "none", "label": "None" }, | ||
{ "value": "product-card-wrapper", "label": "Product Card Wrapper" } | ||
], | ||
"default": "product-card-wrapper", | ||
"label": "Card Styles" | ||
}, | ||
{ | ||
"type": "color_scheme", | ||
"id": "color_scheme", | ||
"label": "Color Scheme", | ||
"default": "scheme-1" | ||
}, | ||
{ | ||
"type": "range", | ||
"id": "padding_top", | ||
"min": 0, | ||
"max": 100, | ||
"step": 4, | ||
"unit": "px", | ||
"label": "Padding Top", | ||
"default": 36 | ||
}, | ||
{ | ||
"type": "range", | ||
"id": "padding_bottom", | ||
"min": 0, | ||
"max": 100, | ||
"step": 4, | ||
"unit": "px", | ||
"label": "Padding Bottom", | ||
"default": 36 | ||
} | ||
], | ||
"blocks": [ | ||
{ | ||
"type": "image", | ||
"name": "Image", | ||
"settings": [ | ||
{ | ||
"type": "image_picker", | ||
"id": "image", | ||
"label": "Image" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "product", | ||
"name": "Product", | ||
"settings": [ | ||
{ | ||
"type": "product", | ||
"id": "product", | ||
"label": "Product" | ||
}, | ||
{ | ||
"type": "checkbox", | ||
"id": "second_image", | ||
"default": false, | ||
"label": "Second Image" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "collection", | ||
"name": "Collection", | ||
"settings": [ | ||
{ | ||
"type": "collection", | ||
"id": "collection", | ||
"label": "Collection" | ||
}, | ||
{ | ||
"type": "text", | ||
"id": "collection_text", | ||
"label": "Collection Display Text", | ||
"info": "Defaults to collection name if empty" | ||
} | ||
] | ||
}, | ||
{ | ||
"type": "video", | ||
"name": "Video", | ||
"settings": [ | ||
{ | ||
"type": "image_picker", | ||
"id": "cover_image", | ||
"label": "Video Cover Image" | ||
}, | ||
{ | ||
"type": "video_url", | ||
"id": "video_url", | ||
"accept": ["youtube", "vimeo"], | ||
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc", | ||
"label": "Video URL", | ||
"info": "Enter the video URL" | ||
} | ||
] | ||
} | ||
], | ||
"max_blocks": 3, | ||
"presets": [ | ||
{ | ||
"name": "Custom Collage", | ||
"blocks": [ | ||
{ | ||
"type": "image" | ||
}, | ||
{ | ||
"type": "product" | ||
}, | ||
{ | ||
"type": "collection" | ||
} | ||
] | ||
} | ||
] | ||
} | ||
{% endschema %} |
Oops, something went wrong.