Hey guys,
Have a JS Fiddle at https://jsfiddle.net/motion2082/sm1364xt/5/ which I would like to use on one of my Products Options.
When the customer enters some text I would like it to display on the product.
Does anyone know how to implement this with a OCMOD?
Is it a difficult thing to do?
Regards,
Motion
Have a JS Fiddle at https://jsfiddle.net/motion2082/sm1364xt/5/ which I would like to use on one of my Products Options.
When the customer enters some text I would like it to display on the product.
Does anyone know how to implement this with a OCMOD?
Is it a difficult thing to do?
Regards,
Motion
You don't need OCMod to accomplish this. You could add the code directly into your custom theme files.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Tried adding it to my Journal 2 theme product.twig file but had no luck
Could be that Journal is stripping out some of the html from the editor.
Could be that Journal is stripping out some of the html from the editor.
Code: Select all
<script>
function init() {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
canvas.width = $('img').width();
canvas.crossOrigin = "Anonymous";
canvas.height = $('img').height();
ctx.drawImage($('img').get(0), 0, 0);
ctx.font = "36pt Times New Roman";
$(document).on('input','#input-option{{ option.product_option_id }}',function(){
//redraw image
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "silver";
ctx.fillText($(this).val(),40,80);
});
$('button').click(function(){
console.log(ctx.getImageData(50, 50, 100, 100));
});
}
</script>
</span>
<button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="button"><span class="button-cart-text">{{ button_cart }}</span></button>
{% endif %}
</div>
</div>
{% if options %}
<div class="options {{ journal2.settings.get('product_page_options_push_classes') }}">
{% for tab in journal2.settings.get('additional_product_description_bottom', []) %}
<div class="journal-custom-tab" style="padding-top:10px;">
{% if tab.has_icon %}
<div class="block-icon block-icon-left" style="{{ tab.icon_css }}">{{ tab.icon }}</div>
{% endif %}
{% if tab.name %}
<h3>{{ tab.name }}</h3>
{% endif %}
{{ tab.content }}
</div>
{% endfor %}
<h3>{{ text_option }}</h3>
{% for option in options %}
{% if option.type == 'select' %}
<div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
<label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
<select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
<option value="">{{ text_select }}</option>
{% for option_value in option.product_option_value %}
<option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
{% if option_value.price %}
({{ option_value.price_prefix }}{{ option_value.price }})
{% endif %} </option>
{% endfor %}
</select>
</div>
{% endif %}
According to JSFiddle.net website, you need to add each portions into their appropriate TWIG files. The top rectangle on the left should be for the product.twig file, the bottom should be for your own JS file and the top-right CSS should be for your stylesheet.css file.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Cheers for the reply.
Tried applying it within OpenCart and haven't had too much luck yet, but getting closer.
The problem seems to be whenever I change the image src to my dynamic "Product Tab" it doesn't show anything. Also the <canvas> tag is just blank.
If only I could find a good OpenCart Javascript developer to make it happen. I would be happy to pay a small fee.
Regards,
Motion
Tried applying it within OpenCart and haven't had too much luck yet, but getting closer.
The problem seems to be whenever I change the image src to my dynamic "Product Tab" it doesn't show anything. Also the <canvas> tag is just blank.
If only I could find a good OpenCart Javascript developer to make it happen. I would be happy to pay a small fee.
Regards,
Motion
Post your request in the Commercial Support section of the forum to get this task done as a custom job.If only I could find a good OpenCart Javascript developer to make it happen. I would be happy to pay a small fee.
Dedication and passion goes to those who are able to push and merge a project.
Regards,
Straightlight
Programmer / Opencart Tester
Who is online
Users browsing this forum: Bing [Bot] and 27 guests