Post by motion2082 » Sat Mar 03, 2018 8:25 pm

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

Active Member

Posts

Joined
Tue May 12, 2015 8:48 pm

Post by straightlight » Sat Mar 03, 2018 9:08 pm

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


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by motion2082 » Sat Mar 03, 2018 9:14 pm

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.

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

Active Member

Posts

Joined
Tue May 12, 2015 8:48 pm

Post by straightlight » Sat Mar 03, 2018 9:53 pm

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


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by motion2082 » Sun Mar 04, 2018 8:03 pm

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

Active Member

Posts

Joined
Tue May 12, 2015 8:48 pm

Post by straightlight » Sun Mar 04, 2018 9:37 pm

If only I could find a good OpenCart Javascript developer to make it happen. I would be happy to pay a small fee.
Post your request in the Commercial Support section of the forum to get this task done as a custom job.

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON
Who is online

Users browsing this forum: Bing [Bot] and 27 guests