I set a value in settings_data.json of Shopify Config.
And I am trying to insert it into my CSS.
settings_schema.json
...
{
"type": "image",
"id": "image1.png"
"label": "Background Image"
}
...
index.liquid
...
<style>
.div {
background-color: url({{image1.png}});
}
</style>
But I can't get the background image.
How can I fix?
You have to use a filter for the image in order to show the full URL address:
For example: {{ image1.png | img_url: 'medium' }}
To get a value of the store settings you need to call the settings object. Also in your schema it seems that the id contains the value and a comma is missing. Double check this.
settings_schema.json
...
{
"type": "image",
"id": "image1", // Name of variable
"label": "Background Image",
"default": "image1.png" // Content
}
...
index.liquid
...
<style>
.div {
background-color: url({{ settings.image1 }});
}
</style>
Related
I am creating an app block with theme app extension with a select menu for the online store. The goal is to allow users/merchants to install our app, add the app by using Add Block and then hit the select menu and select a booklet/pdf from our site to embed on their storefont in Shopify.
I am currently using Shopify CLI 3.0 and have the app installed to our store with the select menu (on the right panel) but the values are hardcoded at the moment.
I wanted to know:
Can I connect to our site, via ajax, on behalf of the account owner and pull a booklet list?
Can I dynamically update the drop-down menu with that booklet list?
I have the liquid file for the block looking like this:
app-block.liquid:
<iframe src='https://louddoc.com/embed.php?wpKey={{ block.settings.workpad_key }}&source=embed' allowfullscreen width='100%' height='1220' style='border: 0; overflow: hidden; width: 1px; min-width: 100%; max-width:950px;' scrolling='no'></iframe>
{% schema %}
{
"name": "Title for App",
"target": "section",
"stylesheet": "app.css",
"javascript": "app.js",
"settings": [
{
"type": "select",
"id": "workpad_key",
"label": "Embed your booklet to your store",
"options": [
{
"value": "5xsYPWgs3l3VbOK1izBx6j",
"label": "Booklet 1"
},
{
"value": "C8Ij8PqtVpDvVpVNVXDQhw",
"label": "Booklet 2"
},
{ "value": "hLxVnSxFJuLw3iCvpfLko1",
"label": "Booklet 3"
}
]
}
]
}
{% endschema %}```
I am creating a new custom section and I would like to add different kind of blocks in it. But I can't find any list of the existing / available / native blocks types (block.type).
EDIT : I was looking for available "specialized input settings" and not "block types". Here the related documentation !
My final goal would be to add meta field to the product entity, allowing an admin to pick a selection of products from an existing product, then to bind this meta product field, to a 'products' block type in my new custom section.
EDIT : Added a solution in reply.
Alright, so thanks to #Onkar and Patrick from discord, here the related documentation : https://shopify.dev/themes/architecture/settings/input-settings#specialized-input-settings
In order to do what I described above, I created a dedicated new meta field "related_product" for product entities : Backend > Settings > Metafields > Custom fields > Products (type Product : List of products).
Then I created a new section in my theme files (sections/product-related.liquid) :
{%- liquid
assign grid = section.settings.per_row
-%}
{% unless section.settings.product_list == empty %}
<div class="product-recommendations row" data-product-id="{{ product.id }}">
<div class="section-title {% if settings.section_titles == 'lines' %}lines {% elsif settings.section_titles == 'btm_border' %}btm_border {% endif %} desktop-12 tablet-6 mobile-3">
<h2>{{ section.settings.heading }}</h2>
</div>
<div class="product-loop">
{%- for product in section.settings.product_list limit: section.settings.limit -%}
<div class="product product-index js-product-listing">
{% render 'product-listing', template: 'product', product: product %}
</div>
{%- endfor -%}
</div>
</div>
{% endunless %}
{% schema %}
{
"name": "Related Products",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "You may also like"
},
{
"type": "product_list",
"id": "product_list",
"label": "Products",
"limit": 12
},
{
"type": "range",
"id": "per_row",
"min": 2,
"max": 4,
"step": 1,
"label": "Products per row",
"default": 4
},
{
"type": "range",
"id": "limit",
"min": 2,
"max": 6,
"step": 1,
"label": "Products shown",
"default": 4
}
],
"presets": [
{
"name": "Related Products"
}
],
"templates": [
"product"
]
}
{% endschema %}
{% stylesheet %}
.product-recommendations .product-loop {
margin: 20px auto;
display: grid;
width: 100%;
margin-left: 1.04166667%;
margin-right: 1.04166667%;
grid-template-columns: repeat({{ grid }}, 1fr);
grid-row-gap: 25px;
grid-column-gap: 40px;
}
#media screen and (min-width: 741px) and (max-width: 980px){
.product-recommendations .product-loop {
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
}
#media screen and (max-width: 740px){
.product-recommendations .product-loop {
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
margin: 0 auto;
}
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
After that I was able to add the section to my product template from Theme customisation. Last thing to do was to map / bind my custom meta field to the 'product_list' block / input. And voila !
I wanted to add font style here like there is an option if you want the font to be arial,san-serif etc... But now the font and font sizes not display in vue2-editor. Can anyone help me?
You can access the code here :
https://codesandbox.io/s/liz23?file=/src/App.vue:0-553
this is the code:
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<p>Some initial content</p>"
};
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
margin-top: 60px;
}
</style>
My answer is based of the excellent answers over at How to add font types on Quill js with toolbar options?. The only thing that I need to change is to use const fonts = Quill.import('formats/font');. vue2-editor exports the Quill object, so you can simply import it as such:
import { VueEditor, Quill } from "vue2-editor";
Then, it is mostly copy-and-pasting the solution in this posted answer. The vue2-editor unfortunately does not expose the default toolbar settings, so you will need to copy it verbatim from the source code and then add your font dropdown manually:
customToolbar: [
// Copied from source
// https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js
[{ header: [false, 1, 2, 3, 4, 5, 6] }],
["bold", "italic", "underline", "strike"], // toggled buttons
[
{ align: "" },
{ align: "center" },
{ align: "right" },
{ align: "justify" }
],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
[{ indent: "-1" }, { indent: "+1" }],
[{ color: [] }, { background: [] }],
["link", "image", "video"],
["clean"],
// This is what I have added
[{ 'font': fonts.whitelist }],
]
See proof-of-concept here: https://codesandbox.io/s/vue2-editor-demo-forked-35wo1?file=/src/App.vue
I have a dynamically filled datatable with fixed columns and scrollX enabled:
$('#products').DataTable({
"data": formattedData,
"scrollX": true,
"fixedColumns":{ "leftColumns": 0, "rightColumns": 1 }
});
The problem is, I need the columns to stop automatically calculating their width. Even if I try to force them on initialization...
$('#products').DataTable({
"order": [[ 0, "asc" ]],
"columnDefs": [
{ "title": "Name", "targets": 0, "width": "350px" },
{ "title": "Code", "targets": 1 },
{ "title": "Regular code", "targets": 2, "width": "500px" },
{ "title": "Special code", "targets": 3, "width": "300px" }
]
});
... if scrollX is enabled, the scrolling is enabled just if the columns are too small. And I want the scrolling enaled always, and the columns not changing their width.
Any idea about how to force the column width?
The same question was asked here but has no answer: https://datatables.net/forums/discussion/31403/scrollx-not-work-with-fixed-column-width
First disable autoWidth -> https://datatables.net/reference/option/autoWidth
In my humble opinion columns.width are useless to anything than relative percentages. Define minimum column widths in CSS instead
#products td:nth-child(1) { min-width: 350px; }
#products td:nth-child(3) { min-width: 500px; }
#products td:nth-child(4) { min-width: 300px; }
http://jsfiddle.net/f8uw6rLy/
Vega/Vega Lite plots have a faint gray border around them... is it possible to remove this via a configuration parameter, or do I need to render as SVG and use CSS to do so?
You can override the default cell style
"config": {
"style": {
"cell": {
"stroke": "transparent"
}
}
}
Alternatively, you can set the view stroke
"config": {
"view": {
"stroke": "transparent"
}
}