I have a section template with a block of type product. This works and I can select the product in customise. However, when it comes to getting the product data to display via liquid, I can't seem to get to the product?
},....
None of the selectors seem to work. Anyone able to advise? My shop regularly have price updates so having a database driven product advert would be ideal yet it seems functionality doesn't support this??
<style type="text/css">
.ph_container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f6f6f6;
position: relative;
}
.ph_box {
width: 0%;
height: 620px;
background: #FFF;
position: absolute;
animation: openBox 1s cubic-bezier(.74, .06, .4, .92) forwards;
}
.ph_product__img {
width: 600px;
position: absolute;
left: -150px;
top: 50px;
opacity: 0;
animation: fadeImg 1s ease-in-out forwards;
animation-delay: 1s;
}
}
.ph_product__video {
width: 320px;
height: 100px;
position: absolute;
left: 50px;
bottom: 50px;
}
.ph_video {
display: flex;
align-items: center;
position: absolute;
bottom: 0px;
opacity: 0;
animation: upVideo 1s cubic-bezier(.74, .06, .4, .92) forwards;
animation-delay: 1.2s;
}
i.ph {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #F71568;
border: 2px solid #F71568;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
transition: ease-in-out 220ms;
cursor: pointer;
}
i.ph:hover {
background: #F71568;
color: #fff;
box-shadow: 0 0 26px #F71568;
}
p.ph {
margin-left: 25px;
font-family: 'Poppins';
}
.ph_product__disc {
width: 0px;
height: 430px;
background: #FFCA1B;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0px;
top: 50px;
animation: showDisc 1s cubic-bezier(.74, .06, .4, .92) forwards;
}
.ph_product__disc--content {
width: 80%;
height: 80%;
display: flex;
justify-content: space-between;
flex-direction: column;
animation: fadeContent 1s ease-in-out forwards;
animation-delay: 1s;
opacity: 0;
}
.ph_disc__content--about {
width: 100%;
}
h1.ph {
font-size: 32px;
font-family: 'Poppins';
}
span.ph {
font-family: 'Lato';
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
display: flex;
opacity: 0.5;
}
p.ph {
margin-top: 35px;
font-size: 14px;
font-family: 'Poppins';
}
.ph_product__view--more {
width: 100%;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.ph_product__view--more:hover .view__more--block {
width: 220px;
height: 35px;
}
.ph_view__more--block {
width: 10px;
height: 15px;
position: absolute;
background: #f6f6f6;
z-index: 1;
transition: cubic-bezier(0.68, -0.55, .27, 01.55) 320ms;
}
p.ph {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
z-index: 2;
margin-left: 15px;
font-family: 'Poppins';
}
.ph_product_buttons {
width: 500px;
height: 100px;
bottom: 50px;
right: -50px;
position: absolute;
}
.ph_btn {
width: 240px;
height: 70%;
font-size: 16px;
font-weight: bold;
font-family: 'Poppins';
-webkit-transition: ease-in-out 220ms;
-moz-transition: ease-in-out 220ms;
-ms-transition: ease-in-out 220ms;
-o-transition: ease-in-out 220ms;
transition: ease-in-out 220ms;
cursor: pointer;
}
.ph_wishlist {
border: 2px solid #F71568;
background:transparent;
color: #F71568;
position: absolute;
bottom: -25px;
left: 0;
opacity: 0;
animation: fadeWish 1s cubic-bezier(.74, .06, .4, .92) forwards;
animation-delay: 1s;
}
.ph_wishlist:hover {
background: #F71568;
color: #FFF;
box-shadow: 0 0 26px #F71568;
}
.ph_buy {
border: none;
background: #F71568;
color: #FFF;
position: absolute;
right: 0;
bottom: 0;
opacity: 0;
animation: fadeBuy 1s cubic-bezier(.74, .06, .4, .92) forwards;
animation-delay: 1s;
}
.ph_buy :hover {
box-shadow: 0 0 26px #F71568;
}
/*
keyframes
*/
@keyframes openBox {
0% {
width: 0px;
left: 15%;
}
100% {
width: 900px;
left: 15%;
}
}
@keyframes fadeImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes upVideo {
0% {
opacity: 0;
bottom: -20px;
}
100% {
opacity: 1;
bottom: 0px;
}
}
@keyframes showDisc {
0% {
width: 0px;
left: 450px;
}
100% {
width: 500px;
left: 450px;
}
}
@keyframes fadeContent {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeWish {
0% {
opacity: 0;
bottom: -25px;
}
100% {
opacity: 1;
bottom: 0;
}
}
@keyframes fadeBuy {
0% {
opacity: 0;
bottom: -25px;
}
100% {
opacity: 1;
bottom: 0;
}
}
@keyframes top {
0% {
opacity: 0;
bottom: -80px
}
100% {
opacity: 1;
bottom: 0px
}
}
@keyframes icon {
0% {
opacity: 0;
transform: scale(0.0);
}
50% {
opacity: 1;
transform: scale(1.3) rotate(-02deg);
}
100% {
opacity: 1;
bottom: 0px;
}
}
</style>
{%- for block in section.blocks -%}
{%- assign lowestPrice = block.settings.product.price_min -%}
{{product.title}}
<div class="ph_container">
<div class="ph_box">
<div class="ph_product__img">
<img src="{{ block.product.selected_or_first_available_variant.featured_image }}" alt="{{ block.settings.product.title }}">
</div>
<div class="ph_product__video">
<div class="ph_video">
<i class="ph fas fa-money"></i>
<p class="ph">From {{lowestPrice | money}}</p>
</div>
</div>
<div class="ph_product__disc">
<div class="ph_product__disc--content">
<div class="ph_disc__content--about">
<h1 class="ph">{{block.settings.title}}</h1>
<span class="ph">{{block.settings.subtext}}</span>
<p class="ph">{{block.settings.description}}</p>
</div>
<a href="{{block.settings.product.url}}"class="ph_product__view--more">
<p class="ph">view all options</p>
<div class="ph_view__more--block"></div>
</a>
</div>
</div>
<div class="row ph_product_buttons">
<div class="col-6" data-overlay="benefit-1">
<img class="img-responsive lazyload" data-src="//cdn.shopify.com/s/files/1/2434/4203/files/k-logo_8_2_1_1_1_2_16_150x.png">
<div class="CheckoutBenefit__ItemDescription">
<h1 class="CheckoutBenefit__ItemTitle" data-live-text-setting="checkout_benefit_1_title">KLARNA</h1>
<p>Pay Later </p>
<p>Pay in 3 Instalments. </p>
<p class="CheckoutBenefit__ItemMore">learn more</p>
</div>
</div>
<div class="col-6" data-overlay="benefit-2">
<img class="img-responsive lazyload" data-src="//cdn.shopify.com/s/files/1/2434/4203/files/PHONE_REWIND_150x.png">
<div class="CheckoutBenefit__ItemDescription">
<h1 class="CheckoutBenefit__ItemTitle" data-live-text-setting="checkout_benefit_2_title">Cancellation</h1>
<p>30 Days to cancel if you change your mind.</p>
<p class="CheckoutBenefit__ItemMore">learn more</p>
</div>
</div>
</div>
</div>
</div>
{%- endfor -%}
{% schema %}
{
"name": "Product Hero",
"class": "shopify-section__product__hero",
"max_blocks": 1,
"settings": [{
"type": "paragraph",
"content": "Add Product Adverts - Database Driven Pricing"
}],
"blocks": [
{
"type": "advert",
"name": "Product Block",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product-Handle"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Treat Yourself"
},
{
"type": "text",
"id": "subtext",
"label": "Sub Title"
},
{
"type": "text",
"id": "description",
"label": "Description"
}
]
}
],
"presets": [
{
"category": "Text",
"name": "Product Hero"
}]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
