Updating price manually


#1
import React, {
  Component
} from 'react';
import {
  connect
} from 'react-redux';
import CheckoutItems from './CheckoutItems';
import Loading from '../global/Loading';
var api = require('../../utils/moltin.js');

function mapStateToProps(state) {
  return (state)
}

class CheckoutSummary extends Component {

  componentDidMount() {

    if (this.props.products.fetched === false) {

      this.props.dispatch((dispatch) => {

        dispatch({
          type: "Fetch_Products_Start"
        })
        api.GetProducts()

          .then((products) => {

            dispatch({
              type: "Fetch_Products_End",
              payload: products
            })
          })
      })
    }

    if (this.props.cart.fetched === false) {

      this.props.dispatch((dispatch) => {

        dispatch({
          type: "Fetch_Cart_Start"
        })

        api.GetCartItems()

          .then((cart) => {
            dispatch({
              type: "Fetch_Cart_End",
              payload: cart
            })
          })
      })
    }
  }

  render() {

    var options = this.props.product.options;

    if (this.props.cart.fetched === true && this.props.products.fetched === true) {

      var tax = this.props.cart.cart.meta.display_price.with_tax.amount - this.props.cart.cart.meta.display_price.without_tax.amount;

      return (
        <div className = "checkout-summary" >
          <div className = "form-header" >
            <h2 > Summary < span className = "hide-content" > of your order, ready for checkout. </span></h2>
          </div>
          <div className = "checkout-items" >
            <CheckoutItems / >
          </div>
          <div className = "price-calculations" >
            <div className = "price-item" > Subtotal < span className = "hide-content" > for all products </span>
              <span className="price">{(this.props.cart.cart.meta.display_price.without_tax.amount/100 + options) * this.props.product.quantity}</span>
            </div>
            <div className = "price-item" > Tax < span className = "price" >{tax}</span></div>
            <div className = "price-item" > Shipping < span className = "price" > $0 </span></div>
          </div>
          <div className = "total-price price" >Total <span className = "price" >{(this.props.cart.cart.meta.display_price.without_tax.amount/100+options)*this.props.product.quantity}</span></div>
          </div>
      )
    }

    return (
      <div className = "checkout-summary" >
        <Loading / >
      </div>
    )
  }
}

export default connect(mapStateToProps)(CheckoutSummary);

When I checkout, the price is not updated in moltin dashboard. I want this.props.cart.cart.meta.display_price.without_tax.amount/100+options)*this.props.product.quantity to be the purchase price. On the moltin dashboard the order placed total is only the base price * quantity.


#2

:wave: thanks for posting!

It’s not possible to manipulate the total of a cart for security reasons. The cart total is automatically calculated based on the item contents and quantity.

Depending on what you’re trying to achieve, you could look at using custom cart items to add to the cart total. Could you provide some more context for what product.options is?

note: I added some syntax highlighting to your post to clean it up a little. It was difficult to read as it was :+1:


#3

product.options is added when a user selects what type of accessories they want added to the product. For example, I’m selling a t-shirt and you can choose what prints you want on the t-shirt and each print is a different price. product.options are the prints the user selects to be added to the total price.


#4

@malaika787 Perfect! Then you’ll need to add the selected product option as a custom cart item. Check the documentation I linked to in the previous post.

Alternatively you could utilise production variations/modifiers. That’s a more complex implementation, but more robust option for sure. Check out our post that gives an overview.


#5

Did you manage to get this resolved @malaika787?

I’d love to hear how you’re getting on building your store :grinning:


#6

If you still need any help I actually just faced the same task.
My solution is somewhat complicated because of it being developed by me having a dynamic context in mind. That is the reason why I don’t want to explain it if you don’t even need it anymore. I hope you understand that :wink:

Here is a demo of my client’s shop: https://shop.hundundherr.com/produkt/be1b5f46-076e-4933-b58d-eea5d60e9275 I’m sorry for it being in German, though, you can see that clicking on “Keine Bestickung” allows you to select a custom text.

If you still face this issue I’m more than happy to assist you!

— Oscar :+1: